<template>
	<view>
		<view class="box">
			<!-- 搜索框 -->
			<view class="head">
				<u-search shape="square" placeholder="搜索手机号/卡号/昵称" v-model="inputValue" clearabled :show-action="false"
					@search="clearList" @clickIcon="clearList" bgColor="#fff">
				</u-search>
			</view>
			<view class="box_list">
				<view class="box_list_item" v-for="(item, index) in list" :key="index" @click="jumpDesc(item)">
					<view class="box_flex flex-c">
						<image :src="item.showFaceUrl?item.showFaceUrl:'/static/images/user.png'"></image>
						<view class="right flex-cb">
							<view>
								<view class="name">
									{{ item.name }}
									<text v-if="item.cardName">@{{ item.cardName }}</text>
								</view>
								<view class="tel">{{ item.phone }}</view>
							</view>
							<view v-if="item.status == 0" class="statusName">禁用</view>
						</view>
					</view>
					<view class="idCard">会员卡号 {{ ' ' + item.card }}</view>
				</view>
			</view>
			<u-loadmore v-if="!is && list.length >= 10" status="nomore" line />
			<view class="no-list" v-if="!list || list.length == 0">
				<image src="@/static/images/default_empty.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			inputValue: '',
			page: 0, //页码
			is: true, //控制是否还能切换下一页
			list: []
		};
	},
	onLoad: function(options) {
		this.getList();
	},
	methods: {
		jumpDesc(item) {
			let face = item.face;
			if (!face || face == null || face == '') {
				face = '/static/images/user.png';
			}
			uni.navigateTo({
				url: `/pages/verification/details?id=${item.id}&name=${item.name}&idcard=${item.cardName}&phone=${item.phone}&card=${item.card}&face=${face}`
			});
		},

		// 列表
		getList() {
			if (!this.is) return
			this.page = this.page + 1
			this.$app.ajax({
				data: {
					pagination: {
						page: this.page,
						rows: 10
					},
					param: {
						userId: uni.getStorageSync('userId'),
						name: this.inputValue
					}
				},
				api: this.$api.memberList()
			}).then(res => {
				if (res.errorCode != '000000') return
				if (res.recordList.length < 10 || !res.recordList) {
					this.is = false
				}
				this.totalCount = res.totalCount;
				let arr = res.recordList
				let arrs = []
				if (arr) {
					arrs = this.list.concat(arr)
				} else {
					arrs = []
				}
				this.list = arrs
			})
		},
		clearList() {
			this.is = true
			this.page = 0
			this.list = []
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
	}
};
</script>

<style>
	page {
		background: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
.box {
	width: 100%;
	padding: 0 30rpx 30rpx;
	box-sizing: border-box;
}

.head {
	padding: 20rpx 0 0;
	background: #f7f7f7;
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

.box_list {
	margin-top: 30rpx;
}

.box_list_item {
	padding: 30rpx;
	box-sizing: border-box;
	margin-bottom: 24rpx;
	background: #ffffff;
	border-radius: 8rpx;
}

.box_flex image {
	width: 72rpx;
	height: 72rpx;
	margin-right: 30rpx;
	border-radius: 50%;
}

.box_flex .right {
	flex: 1;
}

.statusName {
	width: 64rpx;
	text-align: center;
	background: #ffffff;
	border-radius: 4rpx;
	border: 1px solid #e33950;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #e33950;
	line-height: 34rpx;
}

.name {
	font-weight: 500;
	color: #222222;
	font-size: 30rpx;
	line-height: 1.5;
	margin-bottom: 10rpx;
}

.name text {
	font-weight: 400;
	color: #4167c1;
	font-size: 22rpx;
	margin-left: 20rpx;
}

.tel {
	color: #999999;
	line-height: 1.5;
	font-size: 24rpx;
}

.idCard {
	color: #333333;
	font-size: 26rpx;
	margin-top: 10rpx;
	line-height: 1.5;
}

.money {
	color: #333333;
	font-size: 26rpx;
	margin-top: 10rpx;
	line-height: 1.5;
}

.money text {
	font-size: 26rpx;
	color: #dd5040;
}

.num {
	font-weight: 400;
	color: #333333;
	margin-top: 30rpx;
	font-size: 28rpx;
	line-height: 1.5;
}
</style>
